<template>
  <div class="sortList" v-if="inpRes.length > 0">
      <div class="drop">
        <van-dropdown-menu >
        <van-dropdown-item title="综合" disabled />
        <van-dropdown-item v-model="price" :options="priceArr" @change="priceSort" />
        <van-dropdown-item v-model="category" :options="categoryArr" @change="categorySort" />
        </van-dropdown-menu>      
      </div>

      <div class="reveal">
          <div class="revealItem" v-for="item in inpRes" :key="item.id"  @click="toGoodsDetail(item.id)">
              <img :src="item.list_pic_url" alt="">
              <div class="title">{{item.name}}</div>
              <div class="price">{{item.retail_price | trimCash}}</div>
          </div>

      </div>
  </div>
  <van-empty image="search" description="没有商品" v-else />
</template>

<script>
export default {
    data(){
        return{
            price:0,
            category:0,
            priceArr:[
                { text: '价格', value: 0 },
                { text: '价格升序', value: '1:asc' },
                { text: '价格降序', value: '1:desc' },
            ],
            categoryArr:[
                { text: '全部商品', value: 0 },
            ],
            

        }
    },
    props:['resCate','inpRes'],
    mounted(){
    },
    methods:{
        // 整理分类显示数据
        trimCategory(){
            var list = [{ text: '全部商品', value: 0 },]
            if(this.resCate.length > 0){
                this.resCate.map(item =>{
                    let obj = {
                        text:item.name,
                        value:item.id
                    }
                    list.push(obj)
                })
            }
            this.categoryArr = list
        },

        // 改变价格排序
        priceSort(){
            this.$emit('priceSort',this.price)
        },        

        // 改变分类
        categorySort(){
            this.$emit('categorySort',this.category)
        },

        // 带ID转跳详情页面
        toGoodsDetail(id){
            this.$router.push('/detail?goodsId='+id)
        }
    },
    watch:{
        resCate(ol,ne){
           this.$nextTick(()=>{
               this.trimCategory()
           }
           )
         
        }
    }

}
</script>

<style lang="less" scoped>
.sortList{
    width: 100%;
        background-color:var(--bg);

    .drop{
    }
    .reveal{
        width: 100%;
        display: flex;
        justify-content: space-between;  
        flex-wrap: wrap;      
        .revealItem{
            border-bottom: 4px solid var(--bg);
            width: 49.7%;
            background-color: #fff;

            div{
                padding: 10px 0;
                text-align: center;
            }
            img{
                width: 100%;
            }
            .title{
                font-weight: 800;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;

            }
            .price{
                color: var(--imp);
                font-weight: 800;

            }
        }
    }
}

</style>